<template>
    <div style="width: 1300px">
        <el-container>
            <el-header style="background-color: #F3F3F3">
                <i class="el-icon-search" style="font-size: 25px;margin-right: 10px;vertical-align: middle"></i>筛选查询
                <div style="float: right;cursor: pointer">
                    <span @click="flas=false" v-if="flas"><i class="el-icon-d-caret"></i>展开筛选</span>
                    <span @click="flas=true" v-else=""><i class="el-icon-d-caret"></i>收起筛选</span>
                   <!-- <el-button plain style="margin-left: 10px">高级检索</el-button>-->
                </div>
            </el-header>
            <el-main v-show="flas">
                <el-form ref="form" label-width="80px" >
                    <el-row>
                        <el-col :span="8"><div class="grid-content bg-purple"><!--@keyup.native-->
                            <el-form-item label="输入搜索:">
                                <el-input placeholder="课程名称" style="width: 220px"  v-model="from.input1" @change="keyup(from.input1,from.input2,from.input3)"/>
                            </el-form-item>
                        </div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple-light">
                            <el-form-item label="课程分类:">
                                <el-select v-model="from.input2" placeholder="选择课程分类" @change="keyup(from.input1,from.input2,from.input3)">
                                    <el-option label="选择课程分类" value=""></el-option>
                                    <el-option v-for="item in coursrclass" :label="item.name" :value="item.name"></el-option>
                                </el-select>
                            </el-form-item>
                        </div></el-col>
                        <el-col :span="8"><div class="grid-content bg-purple">
                            <el-form-item label="价格:">
                                <el-select v-model="from.input3" placeholder="请选择价格" @change="keyup(from.input1,from.input2,from.input3)">
                                    <el-option label="请选择价格" value=""></el-option>
                                    <el-option v-for="item in coursenprice" :label="item.courseNprice" :value="item.courseNprice">￥{{item.courseNprice}}</el-option>
                                </el-select>
                            </el-form-item>
                        </div></el-col>
                    </el-row>
                </el-form>
            </el-main>
        </el-container>
        <el-header style="background-color: #F3F3F3">
            <i class="el-icon-s-fold" style="font-size: 25px;margin-right: 10px;vertical-align: middle"></i>课程审核列表
        </el-header>
        <el-table
                :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                border
                style="width: 100%">
            <el-table-column
                    type="selection"
                    >
            </el-table-column>
            <el-table-column
                    fixed
                    prop="courseId"
                    label="编号"
                    >
            </el-table-column>
            <el-table-column prop="url" label="课程图片">
                <template slot-scope="scope">
                    <img :src="scope.row.url" alt="" style="width: 50px;height: 50px">
                </template>
            </el-table-column>
            <el-table-column
                    prop="courseName"
                    label="课程名称"
                    >
            </el-table-column>
            <el-table-column
                    prop="courseNprice"
                    label="价格"
                    >
                <template slot-scope="scope">
                    价格：￥{{scope.row.courseNprice}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="分类"
            >
            </el-table-column>
            <el-table-column
                    prop="zip"
                    label="审核状态"
                    >
                <template slot-scope="scope">
                    <span v-if="scope.row.courseCstatus == 3">未审核</span>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    >
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="kechengshenhetanchuang(scope.row)" type="text" size="small">审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px;">
            <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[1,5,10,20]"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="tableData.length">
            </el-pagination>
        </div>
<!--        点击查看弹出框-->
        <el-dialog title="查看课程信息" :visible.sync="dialogTableVisible">
            <el-table
                    :show-header="false"
                    :data="gridData"
                    border
                    :span-method="arraySpanMethod">
            <el-table-column align="center"  prop="we">
                <el-table-column align="center"  prop="amount1"></el-table-column>
                <el-table-column align="center" prop="amount2"></el-table-column>
                <el-table-column align="center" prop="amount3"></el-table-column>
                <el-table-column align="center" prop="amount4"></el-table-column>
                <el-table-column align="center" prop="amount5"></el-table-column>
                <el-table-column align="center" prop="amount6"></el-table-column></el-table-column>
            </el-table>

            <el-divider content-position="left">课程封面</el-divider>
            <img :src="tupian" width="178px" height="200px">
            <el-divider content-position="left">课程视频</el-divider>
            <div class="videoArea">
                <video    :preload="preload"
                          :poster="videoImg" :height="height" :width="width" align="center" :controls="controls"  :autoplay="autoplay">
                    <source :src="videoSrc" type="video/mp4">
                </video>
            </div>
        </el-dialog>
<!--     审核 -->
        <el-dialog title="商品审核" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="fromA" label-width="80px">
                <el-form-item label="课程名称:">
                    {{fromA.name}}
                </el-form-item>
                <el-form-item label="课程审核:">
                    <el-radio-group v-model="fromA.resource">
                        <el-radio v-model="redio" label="审核通过"></el-radio>
                        <el-radio v-model="redio" label="审核不通过"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="反馈详情:">
                    <el-input type="textarea" style="width: 300px" v-model="fromA.desc"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="kechengshenhe(fromA)">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Kshenhe",
        data(){
              return{
                  gridData: [{
                      amount1: "查询课程信息",
                  },{
                      amount1: "课程名称：",
                      amount2: "",
                      amount3: "上传时间：",
                      amount4: "",
                      amount5: "上传人：",
                      amount6: "",
                  },{
                      amount1: "课程售价：",
                      amount2: "",
                      amount3: "课程关键字：",
                      amount4: "",
                      amount5: "课程分类：",
                      amount6: "",
                  },{
                    amount1: "点赞量：",
                    amount2: "",
                    amount3: "收藏量：",
                    amount4: "",
                    amount5: "分享量：",
                    amount6: "",
                  },{
                      amount1: "课程介绍：",
                      amount2: "",
                  },{
                      amount1: "备注：",
                      amount2: "",
                  }],
                  tupian:"",//图片路径
                  videoSrc: '',
                  videoImg: '',
                  playStatus: '',
                  muteStatus: '',
                  isMute: true,
                  isPlay: false,
                  width: '820', // 设置视频播放器的显示宽度（以像素为单位）
                  height: '500', // 设置视频播放器的显示高度（以像素为单位）
                  preload: 'auto', //  建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
                  controls: true, // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
                  autoplay: 'muted',

                  coursrclass:[],//查询类别
                  coursenprice:[],//查询价格
                  from:{
                      input1:"",
                      input2:"",
                      input3:""
                  },
                  fromA:{
                      id:"",//课程id
                      name:"",//课程名称
                      resource:"",//审核状态
                      desc:"",//备注
                      applydate:"",//发起时间
                      launch:"",//发起人
                      implement:"",//执行人
                      implementdate:""//执行时间
                  },
                  flas:true,
                  input:"",
                  url:[],
                  tableData:[],
                  dialogTableVisible: false,
                  dialogFormVisible:false,
                  redio:"审核不通过",

                  currentPage: 1, // 当前页码
                  pageSize: 5 // 每页的数据条数
              }
        },
        methods: {
            arraySpanMethod({ row, column, rowIndex, columnIndex }) {
                if (rowIndex == 0) {
                    if (columnIndex === 0) {
                        return [1, 6];
                    } else if (columnIndex === 1) {
                        return [0, 0];
                    }
                }
                if(rowIndex == 4){
                    if (columnIndex === 1) {
                        return [1, 5];
                    } else if (columnIndex === 1) {
                        return [0, 0];
                    }
                }
                if(rowIndex == 5){
                    if (columnIndex === 1) {
                        return [1, 5];
                    } else if (columnIndex === 1) {
                        return [0, 0];
                    }
                }
            },
            async keyup(input1,input2,input3) {
                if(input3==""){
                    input3=0;
                }
                var params = new URLSearchParams();
                params.append('courseName',input1);
                params.append('name',input2);
                params.append('courseNprice',parseInt(input3));
                const Call = await this.$http.post("/shcoursr/cha",params) .then((res)=>{
                    this.tableData=res.data
                })
            },
            async goBack() {
                const res1 = await this.$http.post("/shcoursr/call") .then((res)=>{
                    this.tableData=res.data
                    this.coursenprice=res.data
                })
                const res2 = await this.$http.post("/shcoursr/courseclass") .then((res)=>{
                    this.coursrclass=res.data
                })
            },
            handleClick(row) {
                console.log(row);
                this.gridData[1].amount2=row.courseName
                this.gridData[1].amount4=row.createDate
                this.gridData[1].amount6=row.createId
                this.gridData[2].amount2=row.courseNprice
                this.gridData[2].amount4=row.coursePrimary
                this.gridData[2].amount6=row.name
                this.gridData[3].amount2=row.likeNum
                this.gridData[3].amount4=row.collectNum
                this.gridData[3].amount6=row.shareNum
                this.gridData[4].amount2=row.courseIntro
                this.gridData[5].amount2=row.remarks
                this.tupian=row.url
                this.videoImg=row.url
                this.videoSrc=row.courseUrl
               this.dialogTableVisible = true
            },
            kechengshenhetanchuang(row){
                var s1 = sessionStorage.getItem("user");
                var myDate = new Date();
                var thisDate = myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+myDate.getDate();//获取当前时间

                this.fromA.implementdate=thisDate
                this.fromA.applydate=row.createDate
                this.fromA.implement=s1
                this.fromA.launch=row.createId
                this.fromA.name=row.courseName
                this.fromA.id=row.courseId
                this.dialogFormVisible=true;
            },
            async kechengshenhe(fromA){
                console.log(fromA)

                var params = new URLSearchParams();
                params.append('courseId',fromA.id);
                params.append('applyDate',fromA.applydate);
                params.append('launchId',fromA.launch);
                params.append('implementId',fromA.implement);
                params.append('implementDate',fromA.implementdate);
                params.append('result',fromA.resource);
                params.append('remarks',fromA.desc);
                params.append('type',2);
                const Call = await this.$http.post("/shcoursr/shenhe",params) .then((res)=>{
                    if(res.data==2){
                        this.$message({
                            message: '更改成功',
                            type: 'success'
                        });
                    }else{
                        this.$message({
                            message: '更改失败',
                            type: 'warning'
                        });
                    }
                })
                this.dialogFormVisible = false
            },
            //每页条数改变时触发 选择一页显示多少行
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage = val;
            }
        },
        created(){
            this.goBack();
        }
    }
</script>

<style scoped>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        text-valign: center;
        line-height: 60px;
    }
    div /deep/ .el-dialog__header {
        border-bottom: 2px solid #ebebeb;
    }
    /*.el-divider--horizontal{
        margin: -20px 0px 10px 0px;
        background: 0 0;
        border-top: 2px solid #e8eaec;
    }*/
</style>